<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/IncludeTop.jsp"%>

<script type="text/javascript">
    $(function() {
        //发送异步请求，获取所有category的信息
        $.get("browse","action=ajaxViewCategory",function (){
            new bootstrap.Popover($('#Cats'),{
                container: '#MainImageContent',
                trigger : 'hover',
                html : true,
                title : 'Cats',
                delay : {show:500, hide:1000},
                content : content('Cats'),
                offset : [305,395]
            });

            new bootstrap.Popover($('#Birds1'), {
                container : '#MainImageContent',
                trigger: 'hover',
                html : true,
                title : 'Birds',
                delay : {show:500, hide:1000},
                content : content('Birds'),
                offset : [20,350]
            });

            new bootstrap.Popover($('#Birds2'),{
                container : '#MainImageContent',
                trigger: 'hover',
                html : true,
                title : 'Birds',
                delay : {show:500, hide:1000},
                content : content('Birds'),
                offset : [210,445]
            });

            new bootstrap.Popover($('#Fish'),{
                container : '#MainImageContent',
                trigger: 'hover',
                html : true,
                title : 'Fish',
                delay : {show:500, hide:1000},
                content : content('Fish'),
                offset : [200,-80]
            });

            new bootstrap.Popover($('#Dogs'),{
                container : '#MainImageContent',
                trigger: 'hover',
                html : true,
                title : 'Dogs',
                delay : {show:1000, hide:1000},
                content : content('Dogs'),
                offset : [350,-70]
            });

            new bootstrap.Popover($('#Reptiles'),{
                container : '#MainImageContent',
                trigger: 'hover',
                html : true,
                title : 'Reptiles',
                delay : {show:500, hide:1000},
                content : content('Reptiles'),
                offset : [400,200]
            });
        });

        //动态加载内容
        function content(category) {
            var data;
            switch (category){
                case 'Cats' : data = $("<table>"+
                    "<tr> <th>Product ID</th> <th>Name</th> </tr>" +
                    "<c:forEach var='product' items='${sessionScope.allCategories.Cats}'>"+
                    "<tr>"+
                    "<td><a href='browse?action=viewProduct&productId=${product.productId}'>${product.productId}</a></td>"+
                    "<td>${product.name}</td>"+
                    "</tr>"+
                    "</c:forEach>"+
                    "</table>");break;
                case 'Dogs' : data = $("<table>"+
                    "<tr> <th>Product ID</th> <th>Name</th> </tr>" +
                    "<c:forEach var='product' items='${sessionScope.allCategories.Dogs}'>"+
                    "<tr>"+
                    "<td><a href='browse?action=viewProduct&productId=${product.productId}'>${product.productId}</a></td>"+
                    "<td>${product.name}</td>"+
                    "</tr>"+
                    "</c:forEach>"+
                    "</table>");break;
                case 'Fish' : data = $("<table>"+
                    "<tr> <th>Product ID</th> <th>Name</th> </tr>" +
                    "<c:forEach var='product' items='${sessionScope.allCategories.Fish}'>"+
                    "<tr>"+
                    "<td><a href='browse?action=viewProduct&productId=${product.productId}'>${product.productId}</a></td>"+
                    "<td>${product.name}</td>"+
                    "</tr>"+
                    "</c:forEach>"+
                    "</table>");break;
                case 'Birds' : data = $("<table>"+
                    "<tr> <th>Product ID</th> <th>Name</th> </tr>" +
                    "<c:forEach var='product' items='${sessionScope.allCategories.Birds}'>"+
                    "<tr>"+
                    "<td><a href='browse?action=viewProduct&productId=${product.productId}'>${product.productId}</a></td>"+
                    "<td>${product.name}</td>"+
                    "</tr>"+
                    "</c:forEach>"+
                    "</table>");break;
                case 'Reptiles' : data = $("<table>"+
                    "<tr> <th>Product ID</th> <th>Name</th> </tr>" +
                    "<c:forEach var='product' items='${sessionScope.allCategories.Reptiles}'>"+
                    "<tr>"+
                    "<td><a href='browse?action=viewProduct&productId=${product.productId}'>${product.productId}</a></td>"+
                    "<td>${product.name}</td>"+
                    "</tr>"+
                    "</c:forEach>"+
                    "</table>");break;
            }
            return data;
        }
    });
</script>

<div id="Welcome">
    <div id="WelcomeContent">
        Welcome to MyPetStore!
    </div>
</div>

<div id="Main">
    <div id="Sidebar">
        <div id="SidebarContent">
            <a href="browse?action=viewCategory&categoryId=FISH"><img src="images/fish_icon.gif" /></a>
            <br/> Saltwater, Freshwater <br/>
            <a href="browse?action=viewCategory&categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
            <br /> Various Breeds <br />
            <a href="browse?action=viewCategory&categoryId=CATS"><img src="images/cats_icon.gif" /></a>
            <br /> Various Breeds, Exotic Varieties <br />
            <a href="browse?action=viewCategory&categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
            <br /> Lizards, Turtles, Snakes <br />
            <a href="browse?action=viewCategory&categoryId=BIRDS"><img src="images/birds_icon.gif" /></a>
            <br /> Exotic Varieties
        </div>
    </div>

    <div id="MainImage">
        <div id="MainImageContent">
            <map name="estoremap">
                <area id="Birds1" alt="Birds" coords="72,2,280,250" href="browse?action=viewCategory&categoryId=BIRDS" shape="rect"/>
                <area id="Fish" alt="Fish" coords="2,180,72,250" href="browse?action=viewCategory&categoryId=FISH" shape="rect" />
                <area id="Dogs" alt="Dogs" coords="60,250,130,320" href="browse?action=viewCategory&categoryId=DOGS" shape="rect" />
                <area id="Reptiles" alt="Reptiles" coords="140,270,210,340" href="browse?action=viewCategory&categoryId=REPTILES" shape="rect" />
                <area id="Cats" alt="Cats" coords="225,240,295,310" href="browse?action=viewCategory&categoryId=CATS" shape="rect" />
                <area id="Birds2" alt="Birds" coords="280,180,350,250" href="browse?action=viewCategory&categoryId=BIRDS" shape="rect" />
            </map>
            <img height="355" src="images/splash.gif" align="middle" usemap="#estoremap" width="350" />
        </div>
    </div>
    <div id="Separator">&nbsp;</div>
    </div>
</div>
<%@ include file="../common/IncludeBottom.jsp"%>